<template>
	<view class="content">
		<u--form :model="form" :rules="rules" ref="uForm" labelWidth="0">
			<u-picker :show="showSex" :columns="columns" keyName="typeName" @confirm="handleSexConfirm"
				@cancel="showSex=false"></u-picker>
			<view class="inner">
				<view class="info_item">
					<view class="item_title">工号/学号
						<view class="important">*</view>
					</view>
					<view class="item_input">
						<u-form-item prop="userId">
							<u--input disabledColor="#ffffff" :disabled="form.type==2" border="none"
								placeholder="请输入工号/学号" v-model="form.userId" clearable></u--input>
						</u-form-item>
					</view>

				</view>
				<view class="info_item">
					<view class="item_title">姓名
						<view class="important">*</view>
					</view>
					<view class="item_input">
						<u-form-item prop="userName">
							<u--input border="none" placeholder="请输入姓名" v-model="form.userName" clearable></u--input>
						</u-form-item>
					</view>

				</view>
				<!-- 选择性别 -->
				<view class="info_item">
					<view class="item_title">性别
						<view class="important">*</view>
					</view>
					<view class="item_input" @click="handleChooseT">
						<u-form-item prop="gender">
							<u-input border="none" disabledColor="#ffffff" disabled placeholder="请选择性别"
								v-model="genderValue" clearable>
							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>

				</view>
				<view class="info_item">
					<view class="item_title">年龄
						<view class="important">*</view>
					</view>
					<view class="item_input">
						<u-form-item prop="age">
							<u--input border="none" type="number" placeholder="请输入年龄" v-model="form.age"
								clearable></u--input>
						</u-form-item>
					</view>

				</view>
			</view>
		</u--form>
		<!-- 提交按钮 -->
		<view class="submit">
			<u-button type="primary" text="提交" @click="handleSubmit"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		addBaseUser
	} from '../../api/user.js'
	export default {
		data() {
			return {
				genderValue: "",
				showSex: false,
				genders: ["男", "女"],
				columns: [
					[{
							gender: 0,
							typeName: "男"
						},
						{
							gender: 1,
							typeName: "女"
						},
					]
				],
				form: {
					roleId: "",

				},
				rules: {
					userName: [{
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur']
					}, ],
					userId: [{
						type: 'string',
						required: true,
						message: '请输入工号/学号',
						trigger: ['blur']
					}, ],
					gender: [{
						type: 'string',
						required: true,
						message: '请输选择性别',
						trigger: ['change']
					}, ],
					age: [{
						type: 'number',
						required: true,
						message: '请输入年龄',
						trigger: ['blur']
					}, ],



				}
			};
		},
		methods: {
			// 提交按钮点击事件
			handleSubmit() {
				console.log(this.form);
				this.$refs.uForm.validate().then(res => {
					let sForm = {
						...this.form
					}
					sForm.age = parseInt(this.form.age)
					sForm.roleId = parseInt(this.form.roleId)
					sForm.type = parseInt(this.form.type)

					addBaseUser(sForm).then(res => {
						let result = res.data

						if (result == "添加成功" || result == "更新成功") {
							uni.$u.toast(result)
							setTimeout(() => {
								uni.navigateBack({
									url: "/subpages/admin_data_import/admin_data_import"
								})
							}, 800)

						} else {
							uni.$u.toast(result)
							return
						}

					})
				}).catch(err => {
					uni.$u.toast("请输入所有必填项")
				})
			},
			// 性别选择框点击事件
			handleChooseT() {
				this.showSex = true
			},
			// 性别选择事件
			handleSexConfirm(data) {
				let index = data.indexs[0]
				this.form.gender = this.genders[index]
				this.genderValue = this.genders[index]
				// 单独做个审核方式的表单验证
				this.$refs.uForm.validateField("gender")
				this.showSex = false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.user) {

				let user = JSON.parse(decodeURIComponent(options.user))
				this.form = {
					...user
				}
				this.genderValue = this.form.gender
				let type = options.type
				this.form.age = parseInt(this.form.age)
				this.form.type = type


			} else {
				let roleId = options.roleId
				let type = options.type
				this.form.type = type
				if (!type) {
					this.form.type = 1
				}
				this.form.roleId = roleId
			}

		},

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20upx;
		padding-top: 68upx;

		.inner {
			width: 100%;
			min-height: 450upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;


			.info_item {
				box-sizing: border-box;
				padding: 0 30upx;
				width: 100%;
				min-height: 110upx;
				background-color: #fff;
				border-bottom: 3upx solid #f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				&:last-child {
					border-bottom: none;
				}

				.item_title {
					position: relative;
					width: 200upx;
					font-weight: 600;

					.important {
						position: absolute;
						top: -2upx;
						left: -20upx;
						font-size: 36upx;
						color: red;


					}

				}

				.item_input {
					flex: 1;
					height: 100%;
					// margin-top: 7upx;
				}
			}
		}

		.submit {
			width: 100%;
			height: 50upx;
			box-sizing: border-box;
			margin-top: 40upx;
		}
	}
</style>